<div class="modal-content">
  <div class="modal-header">
        <span class="total-title d-flex justify-content-center object-view-navbar" id="attachmentModalLabel">
          <span class="icon"><i class="fas fa-paperclip"></i></span>
          <span class="name">
            <strong class="text-uppercase">Attachments</strong>
            <br>Total {{attachments?.length}}
          </span>
        </span>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
            [disabled]='inProcess'
            (click)="activeModal.close({total: attachments.length})">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <div id="uploadFileForm">
      <div appDragDrop id="uploadFileContainer" *permissionLink="['base.framework.object.edit']"
           class="card-body jumbotron text-center align-items-center text-center"
           (click)="fileInput.click()" (fileDropped)="uploadFile($event)">
        <fa-icon class="attachment-fa-icon" icon="cloud-upload-alt"></fa-icon>
        <h6 class="attachment-subtitle">Drop files here or click to upload.</h6>
        <input id="fileUpload" hidden type="file" #fileInput (change)="uploadFile($event.target.files)">
      </div>
      <div class="pre-scrollable">
        <div class="container-fluid border p-2 mb-2 w-auto"
             *ngFor="let attachment of attachments">
          <div class="row align-items-center flex-nowrap">
            <div class="col-auto">
              <fa-icon class="far" [icon]="['far', 'file-alt']"></fa-icon>
            </div>
            <div class="col-9 px-0">
              <a (click)="downloadFile(attachment.name)">{{attachment.name}}</a>
              <p class="mb-0 text-muted">{{attachment.size | fileSize}}</p>
            </div>
            <div class="col-auto px-0" [hidden]="attachment.inProcess"
                 *permissionLink="['base.framework.object.edit']">
              <!-- Button -->
              <a (click)="deleteFile(attachment.public_id)" class="btn btn-link btn-sm align-items-end">
                <i class="far fa-trash-alt"></i>
              </a>
            </div>
          </div>
          <div class="progress" [hidden]="!attachment.inProcess">
            {{attachment?.inProcess}}
            <div class="progress-bar progress-bar-striped progress-bar-animated"
                 role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width:100%">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary mr-1"
            [disabled]='inProcess'
            (click)="activeModal.close({total: attachments.length})">Done</button>
  </div>
</div>
